<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../assets/css/bootstrap.min.css" />
		<link href="dist/bootstrap-editable.css" />
		<link href="dist/bootstrap-table.css" />

		<script src="../../assets/js/jquery-2.0.3.min.js"></script>
		<script src="../../assets/js/bootstrap.min.js"></script>
		<script src="dist/bootstrap-editable.min.js"></script>
		<script src="src/bootstrap-table.js"></script>
		<script src="dist/locale/bootstrap-table-zh-CN.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/editable/bootstrap-table-editable.js"></script>
	</head>

	<body>

		<div id="toolbar" class="btn-group">
			<button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
			<button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
			<button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
		</div>
		<table id="tb_user">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>qwe</td>
			</tr>
		</table>
	</body>
	<script>
		$(function() {
			$("#tb_user").bootstrapTable({
				toolbar: "#toolbar",
				idField: "Id",
				pagination: true,
				showRefresh: true,
				search: true,
				clickToSelect: true,
				queryParams: function(param) {
					return {};
				},
				columns: [{
						checkbox: true
					}, {
						field: "UserName",
						title: "用户名",
						editable: {
							type: 'text',
							title: '用户名',
							validate: function(v) {
								if(!v) return '用户名不能为空';

							}
						}
					}, {
						field: "Age",
						title: "年龄",
						editable: {
							type: 'text',
							title: '用户名',
							validate: function(v) {
								if(!v) return '用户名不能为空';

							}
						}
					}, {
						field: "Birthday",
						title: "生日",
						editable: {
							type: 'text',
							title: '用户名',
							validate: function(v) {
								if(!v) return '用户名不能为空';

							}
						}
					},
					{
						field: "DeptName",
						title: "部门",
						editable: {
							type: 'text',
							title: '用户名',
							validate: function(v) {
								if(!v) return '用户名不能为空';

							}
						}
					}, {
						field: "Hobby",
						title: "爱好",
						editable: {
							type: 'text',
							title: '用户名',
							validate: function(v) {
								if(!v) return '用户名不能为空';

							}
						}
					}
				],
				data: [{
					Id: 1,
					UserName: "zhangsan",
					Age: 12,
					Birthday: new Date(),
					DeptName: "kaifa",
					Hobby: "chi"
				}, {
					Id: 2,
					UserName: "zhangsan",
					Age: 12,
					Birthday: new Date(),
					DeptName: "kaifa",
					Hobby: "chi"
				}],
				onEditableSave: function(field, row, oldValue, $el) {
					$.ajax({
						type: "post",
						url: "/Editable/Edit",
						data: row,
						dataType: 'JSON',
						success: function(data, status) {
							if(status == "success") {
								alert('提交数据成功');
							}
						},
						error: function() {
							alert('编辑失败');
						},
						complete: function() {

						}

					});
				}
			});
		});
	</script>

</html>